.detail {
  .swiper {
    position: relative;

    .shopCar {
      width: 72rpx;
      height: 72rpx;
      position: absolute;
      top: 40rpx;
      right: 32rpx;
      z-index: 1000;
    }

    swiper,
    swiper-item {
      height: 320rpx;
    }

    image {
      width: 100%;
      height: 320rpx;
    }

    .wx-swiper-dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 6rpx;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .wx-swiper-dot-active {
      width: 36rpx;
      background: #FFFFFF;
    }
  }

  .van-progress {
    border-radius: 6rpx;
    margin-bottom: 12rpx;
    height: 14rpx !important;
  }

  .comments {
    margin-top: 12rpx;
    padding: 32rpx 28rpx;
    background: #fff;

    .tit {
      display: flex;
      align-items: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 28rpx;

      .fen {
        width: 116rpx;
        height: 28rpx;
      }

      .tit_t {
        flex: 1;
        text-align: right;
      }

      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .cont {
      display: flex;
      margin-top: 34rpx;

      .cont_l {
        width: 160rpx;
        margin-left: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 64rpx;
        line-height: 90rpx;
        color: #111111;
        text-align: center;

        .cont_x {
          display: flex;
          justify-content: space-between;

          .xin {
            width: 26rpx;
            height: 24rpx;
          }
        }
      }

      .cont_r {
        flex: 1;
        display: flex;
        margin-left: 86rpx;

        .cont_r_l {
          image {
            display: block;
            height: 16rpx;
            margin-bottom: 10rpx;
            margin-left: auto;

            &:nth-child(1) {
              width: 100rpx;
            }

            &:nth-child(2) {
              width: 82rpx;
            }

            &:nth-child(3) {
              width: 60rpx;
            }

            &:nth-child(4) {
              width: 40rpx;
            }

            &:nth-child(5) {
              width: 18rpx;
            }
          }
        }

        .cont_r_r {
          flex: 1;
          margin-left: 26rpx;
        }
      }
    }

    .foot {
      .foot_t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 54rpx;

        .xian {
          width: 232rpx;
          height: 2rpx;
          background: #F2F2F2;
        }

        .tit {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          line-height: 40rpx;
        }
      }

      .foot_x {
        display: flex;
        justify-content: space-between;
        padding: 0 162rpx;
        margin-top: 32rpx;

        image {
          width: 60rpx;
          height: 56rpx;
        }
      }
    }
  }

  .msg {
    background: #fff;
    padding: 32rpx;
    margin-top: 12rpx;

    .price {
      font-size: 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #FA4743;
      line-height: 66rpx;
    }

    .type {
      display: inline-block;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 0rpx 4rpx 4rpx 0rpx;
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      margin-top: 18rpx;
      display: flex;
      align-items: center;
      .text {
        background: #EFFFEF;
        color: #00C4A1;
        padding: 0 16rpx;
      }
      .you {
        width: 64rpx;
        height: 32rpx;
        margin-left: 16rpx;
      }
      .qi {
        width: 174rpx;
        height: 32rpx;
        margin-left: 16rpx;
      }
      .grey {
        background: #FFEFDA;
        color: #FF710B;
      }

      .icon {
        width: 64rpx;
        height: 40rpx;
      }
    }

    .tit {
      margin-top: 20rpx;
      font-size: 40rpx;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #111111;
      line-height: 48rpx;
      display: -webkit-box;
      /* Safari */
      overflow: hidden;
      text-overflow: ellipsis;
      line-clamp: 2;
      /* 限定最多显示两行 */
      -webkit-line-clamp: 2;
      /* Safari and Chrome */
      -webkit-box-orient: vertical;
      /* Safari */
    }
  }

  .start {
    margin: 12rpx 0;
    padding: 0 32rpx;
    background: #fff;

    .start_item {
      display: flex;
      align-items: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;

      .tit {
        color: #999;
      }

      .senven {
        width: 28rpx;
        height: 28rpx;
      }

      .cont {
        margin-left: 24rpx;
        color: #111;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .comment {
    margin: 12rpx 0;
    background: #fff;
    position: relative;

    .tit {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #111111;
      line-height: 32rpx;
      margin: 0 32rpx;
      padding-top: 40rpx;
      display: flex;
      justify-content: space-between;

      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .com-list {
      display: flex;
      padding: 40rpx 0;
      margin: 0 32rpx;

      .com-l {
        width: 64rpx;
        height: 64rpx;
        margin-right: 24rpx;
      }

      .name {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #343538;
        line-height: 28rpx;
      }

      .time {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 24rpx;
        margin-top: 12rpx;
      }

      .xing {
        margin-top: 24rpx;
        display: flex;

        .xin {
          width: 26rpx;
          height: 24rpx;
          margin-right: 6rpx;
        }
      }
    }
  }

  .btn {
    height: 188rpx;

    .button {
      width: 100%;
      height: 188rpx;
      background: #FFFFFF;
      position: fixed;
      bottom: 0;

      button {
        margin: 0 32rpx;
        background: #FA4743;
        border-radius: 16rpx;
        height: 92rpx;
        line-height: 92rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-top: 24rpx;
      }
    }

    .df {
      display: flex;

      button {
        flex: 1;

        &:first-child {
          background: linear-gradient(270deg, #FF9501 0%, #FEC800 100%);
        }
      }
    }
  }

  .fix {
    position: fixed;
    top: 810rpx;
    right: 32rpx;
    width: 84rpx;
    height: 84rpx;
  }

  .share {
    top: 910rpx;
  }

  .disabled {
    button {
      opacity: .3;
    }
  }

  .van-popup {
    box-sizing: content-box;
  }

  .van-popup--bottom.van-popup--round {
    border-radius: 16rpx 16rpx 0 0;
  }

  .pop_cont {
    padding: 0 32rpx;
    margin-top: 80rpx;

    .cont {
      display: flex;

      .pic {
        width: 200rpx;
        height: 200rpx;
        margin-right: 16rpx;
      }

      .cont_r {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .tit {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #111111;
        line-height: 44rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .price {
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FA4743;
        line-height: 56rpx;
        margin-top: 32rpx;

        .num {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          margin-left: 24rpx;
          line-height: 66rpx;
        }
      }
    }

    .shop_list {
      margin-top: 32rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 60rpx;
    }

    .xian {
      margin-top: 32rpx;
      height: 2rpx;
      background: #E0E0E0;
    }

    .tit2 {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
      line-height: 40rpx;
      margin-top: 46rpx;
    }

    .card_list {
      margin-top: 32rpx;

      .card_list_item {
        padding: 14rpx 16rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #111111;
        line-height: 26rpx;
        border: 1rpx solid #111111;
        display: inline-block;
        margin-bottom: 24rpx;
        margin-right: 24rpx;
        overflow: hidden;
        border-radius: 4rpx;
        position: relative;
      }

      .select {
        border: 1rpx solid #FA4743;
        color: #FA4743;

        .select_icon {
          display: block;
          width: 24rpx;
          height: 24rpx;
          position: absolute;
          top: 0;
          right: 0;
        }
      }

    }

    .count {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 32rpx;

      .value_ {
        display: flex;
        margin-left: auto;

        input {
          margin-top: 0;
          background: #fff;
        }

        .ge {
          display: block;
          width: 56rpx;
          height: 56rpx;
          background: #F8F8F8;
          line-height: 56rpx;
          text-align: center;
          margin-left: 8rpx;

          .icon {
            display: block;
            width: 32rpx;
            height: 32rpx;
            margin: 12rpx;
          }
        }
      }
    }
  }

  .share_box {
    background: #F8F8F8;

    .list {
      background: #fff;
      width: 100%;
      height: 200rpx;
      display: flex;
      justify-content: space-around;

      .item {
        .share_btn {
          width: 100%;
          height: 200rpx;
          background: #fff;
          padding: 0;

          &::after {
            border: 0;
          }

          text {
            display: block;
          }
        }

        image {
          width: 88rpx;
          height: 88rpx;
          display: block;
          margin: 40rpx auto 0;
        }

        text {
          font-size: 24rpx;
          font-weight: 400;
          color: #111111;
          line-height: 24rpx;
          margin-top: 16rpx;
          text-align: center;
        }
      }
    }

    .share_sub {
      margin-top: 16rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #111111;
      height: 104rpx;
      line-height: 104rpx;
      background: #fff;

      &::after {
        border: 0;
      }
    }

    .share_tit {
      padding-top: 30rpx;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #111111;
      line-height: 44rpx;
      text-align: center;
    }

    .share_item {
      padding: 34rpx 32rpx;
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      line-height: 36rpx;
      font-size: 32rpx;

      .tit {
        color: #444444;
        width: 140rpx;
      }

      .cont {
        color: #111111;
        flex: 1;
        text-align: right;
      }
    }

    .button {
      margin: 0 32rpx;
      background: #FA4743;
      border-radius: 16rpx;
      height: 92rpx;
      line-height: 92rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      margin-top: 24rpx;
    }
  }

  .share_img {
    display: block;
    width: 700rpx;
    height: 700rpx;
  }
  
  .share_pic {
    position: fixed;
    width: 480rpx;
    height: 848rpx;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    border-radius: 8rpx;
  }

  .alert {
    width: 520rpx;
    background: transparent;

    .xing {
      width: 132rpx;
      height: 132rpx;
      margin-left: 36rpx;
      position: relative;
      z-index: 99;
    }

    .cont {
      height: 700rpx;
      background: linear-gradient(180deg, #FFF6E3 0%, #FFEEC9 0%, #FFFFFF 38%, #FFFFFF 100%);
      transform: translateY(-52rpx);
      border-radius: 16rpx;
      position: relative;

      .close {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
      }

      .tit {
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FFAE15;
        line-height: 44rpx;
        padding-top: 92rpx;
        text-align: center;
      }

      .xin {
        margin-top: 28rpx;
        display: flex;
        justify-content: space-between;
        padding: 0 50rpx;

        .xin_ {
          width: 82rpx;
          height: 82rpx;
          display: block;
        }
      }

      .info {
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 36rpx;
        margin-top: 12rpx;
        text-align: center;
      }

      textarea {
        display: block;
        margin-top: 32rpx;
        margin-left: 32rpx;
        padding: 24rpx;
        padding-bottom: 38rpx;
        background: #F7F8FA;
        width: 456rpx;
        height: 176rpx;
        background: #F7F8FA;
        border-radius: 16rpx;
        font-size: 28rpx;
        line-height: 38rpx;

        text {
          position: absolute;
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          line-height: 32rpx;
          right: 26rpx;
          bottom: 10rpx;
        }
      }

      button {
        width: 360rpx;
        height: 88rpx;
        background: #FA4743;
        border-radius: 8rpx;
        margin-top: 64rpx;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

  }

  .btn_ {
    padding: 40rpx 0 0;
  }
}